<template>
	<div>
		<div class="title">热销推荐</div>
		<ul>
			<router-link :to="/detail/ + item.id" tag="li" class="item border-bottom" v-for="item of list" :key="item.id">
				<img class="item-img" :src="item.imgUrl">
				<div class="item-content">
					<p class="item-title">{{item.title}}</p>
					<p class="item-desc">{{item.desc}}</p>
					<button class="item-button">查看详情</button>
				</div>
			</router-link>
		</ul>
	</div>
</template>

<script>
export default{
	name:'HomeRecommend',
	props:{
		list:Array
	}
}
</script>

<style lang="stylus" scoped>
	.title
		background:#eee
		font-size:0.3rem
		padding:0.15rem
	.item
		display:flex
		padding:0.1rem 0.1rem
		.item-img
			width:1.5rem
			height:1.5rem
			padding:.1rem
		.item-content
			flex:1
			padding:.1rem
			.item-title
				font-size:0.32rem
				line-height:.54rem
			.item-desc
				line-height:.4rem
				color:#ccc
				font-size:0.25rem
			.item-button
				background:orange
				color:#ccc
				padding:0 .2rem
				border-radius:0.05rem
				line-height:0.44rem
				margin-top:0.16rem
				color:#fff
			
	
</style>